<template>
  <div v-infinite-scroll = "test1" infinite-scroll-distance = '1'>
    <div class = "singer-container">
      <!--分类Tags-->
      <el-row :gutter = "20" v-for = "item in navList" :key = "item">
        <!--名称-->
        <el-col :span = "1.5" class = "singer-category">
          <span>{{ item.type }}:</span>
        </el-col>
        <!--Tags-->
        <el-col :span = "22.5" class = "singer-tags">
          <div v-for = "tags in item.typeList" :key = "tags" class = "singer-tag-div">
            <el-link @click = "selected(tags)"
                     :class = "{'holding':true,'selected-tags':tags.isSelected}" :underline = "false">
              {{ tags.typeName }}
            </el-link>
          </div>
        </el-col>
      </el-row>
      <!--歌手列表-->
      <el-space wrap style = "width: 100%" :size = "40">
        <router-link to = "/" v-for = "singer in singerList" :key = "singer" class = "singer-item">
          <el-image style = "width: 180px" :src = "logo"></el-image>
          <span>{{ singer.name }}</span>
        </router-link>
      </el-space>
    </div>
  </div>

</template>

<script setup>
import logo from '@/assets/logo.png'
import {reactive} from "vue";

function selected(item) {
  item.isSelected = true
}

function test1() {
  console.log(1)
}


const navList = reactive([
  {
    type: '语言',
    typeList: [
      {
        typeId: 1,
        isSelect: false,
        typeName: '全部'
      }, {
        typeId: 2,
        isSelect: false,
        typeName: '中文'
      },
    ]
  },
  {
    type: '分类',
    typeList: [
      {
        typeId: 1,
        isSelect: false,
        typeName: '全部'
      },
      {
        typeId: 2,
        isSelect: false,
        typeName: '男歌手'
      }, {
        typeId: 3,
        isSelect: false,
        typeName: '女歌手'
      }
    ]
  },
  {
    type: '筛选',
    typeList: [
      {
        typeId: 1,
        isSelect: false,
        typeName: '热门'
      }, {
        typeId: 2,
        isSelect: false,
        typeName: 'A'
      }, {
        typeId: 3,
        isSelect: false,
        typeName: 'B'
      }, {
        typeId: 4,
        isSelect: false,
        typeName: 'C'
      },
    ]
  },
])
const singerList = reactive([
  {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  }, {
    name: '林俊杰'
  },
])

</script>

<style lang = "less" scoped>
.singer-container {
  overflow: hidden;

  .singer-category {
    span {
      font-size: 14px;
    }


  }

  .singer-tags {
    //width: 100%;
    display: flex;
    justify-content: flex-start;

    .singer-tag-div {
      width: 100%;
      display: flex;
      padding: 0 10px;
      margin-bottom: 5px;
      border-right: 1px solid #b9b8b8;

    }

    & :nth-last-child(1) {
      border-right: 0;
    }


  }


  .singer-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;

    span {
      opacity: .7;
      cursor: pointer;


      &:hover {
        font-weight: 500;
        opacity: 1;
      }
    }
  }


  // 通用样式
  .el-link {
    width: 85px;
    padding: 0 20px;
  }


}

</style>